<template>
  <div class="article-list">
    <ArticleCard
        v-for="article in articles"
        :key="article.id"
        :article="article"
    />
  </div>
</template>

<script>
import ArticleCard from './ArticleCard.vue'

export default {
  name: 'ArticleList',
  components: {
    ArticleCard
  },
  props: {
    articles: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.article-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
</style>